<template>
    <div class="log_top">
        <img src="../assets/log_top.png" width="100%">
    </div>
    <div class="body">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="账号" left-icon="user" placeholder="登录账号"
                    :rules="[{ required: true, message: '请输入用户名' }]" />
                <van-field v-model="password" type="password" name="密码" left-icon="lock" placeholder="登录密码"
                    :rules="[{ required: true, message: '请输入密码' }]" />
                <div class="kaiguan">
                    <van-switch v-model="switchValue" @change="onSwitchChange" />
                </div>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" @click="TOLOGIN">
                    登录
                </van-button>
            </div>
        </van-form>
    </div>

    <div class="foot">
        <span id="forget" @click="forget_password">忘记登录密码</span>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import http from '@http';
import axios from 'axios';
import { showToast } from 'vant';

const router = useRouter();
const username = ref('');
const password = ref('');
let local_data = ref();
let local_d = ref();

// 初始值为关闭状态
const switchValue = ref(false);

const onSwitchChange = (value) => {
    console.log('开关状态：', value);
    // 处理开关状态改变的逻辑
}

const onSubmit = (values) => {
    console.log('submit', values);
};

function forget_password() {
    router.push('/reset')
}

function TOLOGIN() {
    axios({
        method: 'post',
        url: 'http://127.0.0.1:8000/userlogin/',
        data: {
            username: username.value,
            password: password.value
        }
    }).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
            alert('登录成功')
            router.push('/toLogin')
            local_d = localStorage.setItem('username', username.value)
        } else {
            alert('登录失败')
        }
    }).catch((err) => {
        console.log(err)
    })
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.log_top {
    margin-top: 20px;
}

.body {
    margin-left: 25px;
    margin-top: 30px;
}

.kaiguan {
    position: relative;
    right: -200px;
    bottom: 37px;
    /* background-color: green; */
}

.foot {
    justify-content: center;
    margin-left: 120px;
    margin-top: 30px;
}

#forget {
    color: #337AF6;
    font-weight: 500;
}
</style>